﻿@{
    Layout = "../Shared/_LayoutMain.cshtml";
    ViewBag.PageTitle = "我的订单 - " + ViewBag.site.SeoTitle;
    ViewBag.PageKeyword = ViewBag.site.SeoKeyword;
    ViewBag.PageDescription = ViewBag.site.SeoDescription;
}
<div class="wrapper">
    <div class="account-box">
        @{
            await Html.RenderPartialAsync("../Shared/_AccountNav.cshtml","order");
        }
        <div class="right-box">
            <div class="tab-box">
                <div class="menu-box">
                    <div class="item-box active">
                        <span>我的订单</span>
                    </div>
                </div>
            </div>
            <div class="content">
                <div v-if="listData.length===0" class="nodata">
                    <span class="icon iconfont icon-msg"></span>
                    <span class="text">暂无记录</span>
                </div>
                <div class="order-list">
                    <div v-for="(item,index) in listData" :key="index" class="list-box">
                        <div class="head-box">
                            <span class="time iconfont icon-time">{{item.addTime}}</span>
                            <span class="state">{{orderStateExp(item)}}</span>
                        </div>
                        <div v-for="(goods,gindex) in item.orderGoods" :key="gindex" class="item-box">
                            <div class="img-box">
                                <img :src="common.loadFile(goods.imgUrl)">
                            </div>
                            <div class="txt-box">
                                <span class="text">{{goods.goodsTitle}}</span>
                                <span class="info">{{goods.specText}} x {{goods.quantity}}</span>
                                <span class="price">{{goods.realPrice}}</span>
                            </div>
                            <div v-if="item.paymentStatus===1" class="btn-box">
                                <el-tag v-if="goods.deliveryStatus===2" type="info">已退货</el-tag>
                                <el-button v-if="goods.deliveryStatus===1" size="small" type="warning" @@click="common.linkUrl('/account/refund/add/'+goods.id)">申请售后</el-button>
                            </div>
                        </div>
                        <div class="total-box">
                            <div class="left">
                                <el-tag v-if="item.orderType===1" type="warning" effect="plain">限时抢购</el-tag>
                                <el-tag v-if="item.orderType===2" type="warning" effect="plain">积分换购</el-tag>
                            </div>
                            <div class="right">
                                共<span class="num">{{item.orderGoods.length}}</span>件商品，实付<span class="price">￥{{item.orderAmount}}</span>元
                            </div>
                        </div>
                        <div class="btn-box">
                            <el-button type="primary" @@click="common.linkUrl('/account/order/show/'+item.id)">查看订单</el-button>
                            <el-button v-if="item.status<3&&item.paymentStatus==0" @@click="cancelOrder(item)" type="warning">取消订单</el-button>
                            <el-button v-if="item.status===1&&item.paymentStatus==0" @@click="common.linkUrl('/payment/confirm?no='+item.tradeNo)" type="danger">去支付</el-button>
                            <el-button v-if="item.deliveryStatus>0" @@click="common.linkUrl('/account/order/delivery?no='+item.orderNo)" type="danger">查看物流</el-button>
                            <el-button v-if="item.status==3||item.status==4" @@click="confirmOrder(item)" type="danger">确认收货</el-button>
                            <el-button v-if="item.status==5&&item.orderGoods.find(val=>val.deliveryStatus===1&&val.evaluateStatus===0)" type="success" @@click="common.linkUrl('/account/evaluate/edit/'+item.id)">立即评价</el-button>
                            <el-button v-if="item.status>2" @@click.stop="common.linkUrl('/account/refund/list?no='+item.orderNo)" class="btn">售后详情</el-button>
                        </div>
                    </div>
                </div>

                <div class="pager-box">
                    <el-pagination background
                        :hide-on-single-page="true"
                        @@current-change="handleCurrentChange"
                        :page-size="pageSize"
                        layout="prev, pager, next"
                        :total="totalCount">
                    </el-pagination>
                </div>

            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                status: 0, //订单类型
                totalCount: 0, //总数量
                pageSize: 10, //每页显示条数
                pageIndex: 1, //当前页码
                listData: [],//数据列表
                account: null, //会员信息
            },
            methods: {
                //加载列表
                async loadData() {
                    let _this = this;
                    AxiosAjax({
                        url: `/account/order?pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}&status=${_this.status}`,
                        loading: true,
                        success: function (res) {
                            _this.listData = res.data;
                            let pageInfo = JSON.parse(res.headers["x-pagination"]);
                            _this.totalCount = pageInfo.totalCount;
                            _this.pageSize = pageInfo.pageSize;
                            _this.pageIndex = pageInfo.pageIndex;
                        },
                        error: function (err) {
                            _this.listData = []
                        }
                    });
                },
                //初始化数据
                async initData() {
                    let _this = this;
                    //加载列表
                    await _this.loadData();
                    //加载会员信息
                    await AxiosAjax({
                        url: `/account/member/info`,
                        success: function (res) {
                            _this.account = res.data;
                        }
                    });
                },
                //跳转到第几页
                handleCurrentChange: function (val) {
                    if (this.pageIndex != val) {
                        this.pageIndex = val;
                        this.loadData();
                    }
                },
                //订单状态
                orderStateExp(item) {
                    let stateTip = '已下单';
                    if(item.status===1){
					    stateTip = '待付款';
				    }else if(item.status===2){
					    stateTip = '待发货';
				    }else if(item.status===3){
					    stateTip = '待收货';
				    }else if(item.status===4){
					    stateTip = '已签收';
				    }else if(item.status===5){
					    stateTip = '交易成功';
					    if(item.orderGoods.find(val=>val.deliveryStatus===1&&val.evaluateStatus===0)){
						    stateTip = '待评价';
					    }
				    }else if(item.status===6){
					    stateTip = '交易取消';
				    }else if(item.status===7){
					    stateTip = '交易作废';
				    }
                    return stateTip;
                },
                //取消订单
                cancelOrder(item) {
                    let _this = this;
                    _this.$confirm('确认要取消订单吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        AxiosAjax({
                            method: "put",
                            url: `/account/order/cancel/${item.id}`,
                            loading: true,
                            successMsg: '订单已取消',
                            success: function (res) {
                                item.status = 6; //更改订单状态
                            }
                        });
                    }).catch(() => { });
                },
                //确认收货
                confirmOrder(item) {
                    let _this = this;
                    _this.$confirm('确认已收到货了吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        AxiosAjax({
                            method: "put",
                            url: `/account/order/confirm/${item.id}`,
                            loading: true,
                            successMsg: '交易已成功',
                            success: function (res) {
                                item.status = 5; //更改订单状态
                            }
                        });
                    }).catch(() => { });
                },
            },
            created() {
                let status = parseInt(common.queryValue("status"));
                this.status = status ? status : 0;
                this.initData();
            }
        })
    </script>
}